@font-face {
	font-family: 'Ballantine';
	src: url('../fonts/ballantinesscriptef-heavy-webfont.woff');
}
@font-face {
	font-family: 'KhmerMN';
	src: url('../fonts/khmermn-webfont.woff2');
}
@font-face {
	font-family: 'Aachen';
	src: url('../fonts/aachenef-medium-webfont.woff');
}
* {
    margin: 0px;
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

:focus {
    outline: 0;
}

html, body {
    width: 100%;
    height: 100%;
    background-color: #eae6d0;
    font-size: 100%;
    padding: 0;overflow: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#main-mask {
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;background-color: #eae6d0;
    position:absolute;
}

#container {
    width: 100%;height: 100%;
    z-index: 0;background-color: #b6d066;
    position: absolute;
    top:0px;left:0px;
    margin: auto;
    overflow: hidden;
	display:block;
}
#mobile-overlay {display: none;width:100%;height: 100%;background-color:#fff;text-align: center;position: fixed;}
h1 {font-family:'Ballantine',cursive;color:#f0533f;font-weight: normal}
p {font-family:'KhmerMN',Georgia,serif;color:#2b6a35;font-size:25px;text-align:center;padding-top:25px;line-height: 32px}
.full-p {width:80%;margin-left:10%;padding:0;float:left;}
p a {color:#2b6a35;}
p span {font-family:'Ballantine',cursive;color:#f0533f;font-size:48px}
.transparent {opacity: 0}
.right {float:right !important}

.panels {height:100%;position:absolute;top:0;left:0;width:100%;overflow:hidden;background-color: transparent;}
#panel-intro,#panel-kitchen,#panel-desk,#panel-coffee,#panel-steve,#panel-donuts,#panel-pres,#panel-kodi,
#panel-end,#panel-donation {position: absolute;left:0%;width:100%;height:100%;overflow: auto;background-color:#eae6d0}
.panel-content-container {margin-left:100%;background-color: #eae6d0;width:100%;}
.panel-content {width:100%;max-width:1200px;height:100%;margin:auto;position: relative}

#top {height:8%;width:100%;background-color:green;opacity:.0;}
#header {background-image:url(../img/bg.jpg);}
#header img:nth-child(1) {margin-top:8%;width:100%;}
#header img:nth-child(2) {width:25%;position: absolute;left:37%;top:26%}


.buttons-container {width:100%;position: relative;background-color:#eae6d0}
.buttons-bg {position: absolute;top:-1px;left:0;width:100%;-webkit-transform: scale(1,-1);transform: scale(1,-1);}
.buttons {display: table;margin:auto;width:500px}
.button {float:left;width:100%;height:87px;cursor: pointer;position: relative;transition:all 0.35s ease-in-out;margin-left:7px;}
.button img {position: absolute;width:97%;box-shadow:10px 10px 0px #cdcbb8}
.button div {background-color:#eae6d0;width:105%;height:100%;position: absolute;}
.button img:hover,.button img:hover {box-shadow:0 0 0 #cdcbb8;transform:translate(7px,7px);-webkit-transform:translate(7px,7px);}

.headline-container {width:100%;height:60px;float:left;margin-bottom:25px}
.headline-container h1 {font-size:64px;padding:0 10px;}
.headline {display: table;margin:auto}
.headline div {float:left;}
.headline-line-left,.headline-line-right {width:100px;height:3px;position: relative;margin-top:40px}
.headline-line-left div,.headline-line-right div {position: absolute;width:100%;height:100%;}
.headline-line-left div:nth-child(1),.headline-line-right div:nth-child(1) {background-color:#2a6934;}
.headline-line-left div:nth-child(2) {background-color:#eae6d0;left:0}
.headline-line-right div:nth-child(2) {background-color:#eae6d0;right:0}

#panel-intro .group {width:100%;float:left;position: relative}
.intro-group {width:56%;margin-left:22%;float:left}
.intro-group3 {position: absolute;width:6%;top:50%;left:5%;}
.intro-group2 {position: absolute;width:5.5%;top:65%;left:30%;}
.intro-group1 {position: absolute;width:6%;top:30%;left:89%;}
.intro-snowflakes1,.intro-snowflakes1b {width:20%;left:18%;top:-100px;position: absolute;}
.intro-snowflakes2,.intro-snowflakes2b {width:20%;left:62%;top:-100px;position: absolute;}
.intro-txt1 {width:100%;top:55%}
.intro-person {width: 9%;margin-left: 46%;margin-bottom:30px}
#panel-intro .sneaking {float:left;position: relative;width:100%;}
#panel-intro .sneaking img:nth-child(1) {float:left;width:25%;margin-left:37%}
#panel-intro .sneaking img:nth-child(2) {position: absolute;left: 39%;top: 25%;width: 10%;}
#panel-intro .panel-content > .buttons {top:80%;}
#panel-intro .panel-content > .buttons .button:nth-child(1) {left:5%;}
#panel-intro .panel-content > .buttons .button:nth-child(2) {right:5%;}
#panel-intro .scroll {float:left;position: relative;width:100%;margin-bottom:30px;text-align: center}
#panel-intro .scroll p {color:#acaca4 !important;padding-top:0}
#panel-intro .scroll img {width:90px;position: absolute;left: 50%;margin-left: -45px;}

#middle-container div {float:left;}
#panel-intro #middle-container {position: relative;}
#panel-intro #middle-container > div:nth-child(1) {width:45%}
#panel-intro #middle-container > div:nth-child(1) img {width:46%;float:right;margin-right: 5%;}
#panel-intro #middle-container > div:nth-child(2) {width:9%}
#panel-intro #middle-container > div:nth-child(2) img {width:100%}
#panel-intro #middle-container .intro-bubbles {position: absolute;width:4%;left: 47%;top: -80px;}
#panel-intro #middle-container .intro-bubbles img {opacity: 0;width:100%;}
#panel-intro #middle-container .intro-bubble {width:42%;margin-top: -35px;}
#panel-intro #middle-container .intro-bubble div {width:55%;position: relative;height:150px;}
#panel-intro #middle-container .intro-bubble div div {position: absolute;right:0%;background-color:#eae6d0;height:100%;width:100%}
#panel-intro #middle-container div div img {position: absolute;width:100%}
#panel-intro #middle-container .intro-bubble img {width: 72%;}
#panel-intro #middle-container .intro-bubble .txt2 {right:0}

#panel-kitchen .group,#panel-kitchen .group2 {width:100%;float:left;position: relative;}
#panel-kitchen .group img:nth-child(2) {width: 56%;margin-left: 22%;float: left;position: relative;}
#panel-kitchen .group img:nth-child(1) {position: absolute;left:51%;top:-6%;width:7%}
#panel-kitchen .group2 img:nth-child(1) {width: 42%;margin-left: 33%;float: left;position: relative;}
#panel-kitchen .kitchen-person {width:11%;left: 41%;position: absolute;top:24%;}
#panel-kitchen #middle-container {position: relative}
#panel-kitchen #middle-container > div:nth-child(1) {width:60%}
#panel-kitchen #middle-container > div:nth-child(1) img {width:75%;float:right;}
#panel-kitchen #middle-container > div:nth-child(2) {width:20%;left:25%;position: absolute;}
#panel-kitchen #middle-container > div:nth-child(2) img {width:100%;}
#panel-kitchen #middle-container > div:nth-child(3) {width:10%;left: 62%;position: absolute;top:260px;height: 100px;}
#panel-kitchen #middle-container > div:nth-child(3) img {width:100%;position: absolute;}
#panel-kitchen #middle-container > div:nth-child(3) img:nth-child(2) {top: 75px;left: -25px;}
#panel-kitchen #middle-container > div:nth-child(3) img:nth-child(3) {top: 80px;left: 65px;}

.desk {width:46%;margin-left:27%;float:left}
#panel-desk .group img:nth-child(1) {width: 12%;position: absolute;left: 80%;}
#panel-desk #middle-container,#panel-desk #middle-container2 {position: relative;}
#panel-desk #middle-container div {text-align: center;top: -135px;width: 59%;left: 20%;position: absolute;}
#panel-desk #middle-container div img {margin-top:-5px;width: 100%;display: none;}
#panel-desk #middle-container div img:nth-child(3) {margin-top:-6px}
#panel-desk #middle-container2 div {position: absolute;width:100%}
#panel-desk #middle-container2 div img {width:40%;margin-left: 4%;}

#panel-coffee .group {position: relative}
#panel-coffee .group img:nth-child(2) {width:40%;margin-left:29%;float:left}
#panel-coffee .group img:nth-child(1) {width: 12%;position: absolute;left: 72%;}
#panel-coffee #middle-container div {float:left;width:86%;margin-left:7%;position: relative}
#panel-coffee #middle-container img:nth-child(1) {width:100%}
#panel-coffee #middle-container img:nth-child(2) {position: absolute;width:25%;left:37%;top:32%;}
#panel-coffee #middle-container img:nth-child(3) {position: absolute;width:80%;left: 10%;top: -7%;}
#panel-coffee #middle-container img:nth-child(4) {position: absolute;width: 50%;left: 25%;top:0%;}
#panel-coffee #middle-container2 {margin-top:10px;text-align: center;position: relative;}
#panel-coffee .game {float: left;width:70%;height:100%;margin-left:15%;position: relative}
#panel-coffee .game .brown {fill:#604810;background-color:#604810}
#panel-coffee .game .green {fill:#74a333;background-color:#74a333}
#panel-coffee .game .ingredients {position: absolute;width:100%;height:40%;}
#panel-coffee .game .ingredients * {transition: all .2s ease-in-out}
#panel-coffee .game .water,#panel-coffee .game .filter,#panel-coffee .game .bag{cursor: pointer;float:left;width:30%;height:100%;
	margin-top:13%;position: relative;-webkit-transform:scale(1);transform:scale(1);}
#panel-coffee .game .water:hover > svg,#panel-coffee .game .filter:hover > svg,#panel-coffee .game .bag:hover > svg,
#panel-coffee .game .water:hover > div,#panel-coffee .game .filter:hover > div,#panel-coffee .game .bag:hover > div
{-webkit-transform:scale(1.07);transform:scale(1.07)}
#panel-coffee .game .ingredients div svg {float: left;width:100%;height:100%}
#panel-coffee .game .ingredients div div {position:absolute;width:100%;height:100%;margin-top:0}
#panel-coffee .game .ingredients .filter {margin:0 5%}
#panel-coffee .game .line {height:50%;width:2px;position: absolute;background-color: transparent}
#panel-coffee .game .line div {height:0;width:100%;background-color:#604810}
#panel-coffee .game .line1 {-webkit-transform:rotate(-40deg);transform:rotate(-40deg);left: 30%;top: 45%}
#panel-coffee .game .line2 {left:50%;margin-left:-1px;top:35%}
#panel-coffee .game .line3 {left:68%;top:45%;-webkit-transform:rotate(40deg);transform:rotate(40deg);}
#panel-coffee .coffee-pot {float: left;width: 18%;margin-left: 41%;margin-top:40%;position: relative;}
#panel-coffee .button {margin-top: 25px;}

 .game-error {position: fixed;width:500px;left:50%;margin-left:-250px;top:50%;margin-top:-200px;background-color: #f15f47;display: none}
 .game-error .x {float:left;width:100%;text-align: center;margin:25px 0 0 0;}
 .game-error .msg {float:left;width:80%;margin-left:10%;text-align: center;margin-bottom: 15px;}
 .game-error .btn {float:left;padding:10px 0;border:2px solid white;width: 40%;cursor: pointer;transition: all .25s ease-in-out;
    margin-left: 30%;background-color: transparent;color: #fff;font-size: 21px;text-align: center;margin-bottom: 20px;}
 .game-error .btn:hover {background-color: white;color:#ef4937}

.game-headline {width:50%;margin-left:25%;float:left;position: relative}
.game-headline img {float:left;width:100%;}
.game-headline div {background-color:#eae6d0;width:100%;height:100%;position: absolute;top:0;right:0}

.game-success {background-color:#74a333;position: fixed;width:500px;left:50%;margin-left:-250px;top:15%;display: none;}
.game-success p {float:left;width:80%;margin-left:10%;text-align: center;margin-bottom: 15px;color:#fff}


#steve-intro {position: relative;height:550px}
#steve-intro img {position: absolute;}
.steve-desk1 {width:30%;bottom:0;left:9%}
.steve-desk2 {width:37%;top:0;left:30%}
.steve-desk3 {width:30%;bottom:0;left:61%;}
.steve-person1 {width:7%;top:9%;left:34%;-webkit-transform: scale(-1,1);transform: scale(-1,1);}
#panel-steve #middle-container {position: relative;width: 80%;margin-left: 10%;}
#panel-steve #middle-container .person1 {float: left;width:13%;margin-top:60px;margin-left:30%}
#panel-steve #middle-container .person2 {float: left;width:22%;margin-left:4%}
#panel-steve #middle-container .speech1,#panel-steve #middle-container .speech2,#panel-steve #middle-container .speech3
	{position:absolute;width:20%;}
#panel-steve #middle-container .speech1 {top:-50%;left:60%}
#panel-steve #middle-container .speech2 {left:72%;top:150%}
#panel-steve #middle-container .speech3 {left:6%;top:360%;}
#panel-steve #middle-container .txt1 {float:left;width:38%}
#panel-steve #middle-container .txt2 {position: absolute;top:500%;right:0;width:38%}
#panel-steve #middle-container2 {text-align: center;position: relative;}
#panel-steve #middle-container2 .steve-person4 {width: 15%;float: left;margin-left: 30%;}
#panel-steve #middle-container2 div {width:50%;float:left;position: relative;}
#panel-steve #middle-container2 .speech4 {width:30%;position: absolute;margin-top:-10%;left:150px;}
#panel-steve #middle-container2 .person-walking {width:20%;position: absolute;margin-top: 5%;left: 3%;}

#panel-pres .group {position: relative;width:100%}
#panel-pres .group img:nth-child(1) {float: left;width: 38%;margin-left: 31%;}
#panel-pres .group img:nth-child(2) {position: absolute;left:15%;top:90px;width: 11%;}
#panel-pres #middle-container {position: relative;}
#panel-pres #middle-container div {position: absolute;top: 0;left: 0;width:100%;height:100%}
#panel-pres #middle-container div img:nth-of-type(1) {width:18%;position: absolute;top:-30px;left: 40%}
#panel-pres #middle-container div img:nth-of-type(2) {width:18%;position: absolute;top: 60%;left: 15%;}
#panel-pres #middle-container div img:nth-of-type(3) {width:11%;position: absolute;top: 0%;left: 18%;}
#panel-pres #middle-container .board {width: 16%;height: 50%;left:15%;transform: skew(-50deg) rotate(-49deg);
-webkit-transform: skew(-50deg) rotate(-49deg);top: -20%;}
#panel-pres #middle-container .board div {height: 0%;width: 100%;background-color: white;}
#panel-pres .pres-group2 {width:60%;margin-left:30%}
#panel-pres .game-headline {width:42%;margin-left:29%;margin-bottom: 15px;position: relative;}
#panel-pres .pres-bubble {float:left;position:relative;width:80%;margin-left:10%;background-color:#fff;border-radius:70px;}
#panel-pres .pres-bubble p {color:#f04937;padding:20px;font-family: 'Aachen',serif;}
#panel-pres .pres-bubble p span {font-family: 'Aachen',serif;font-size:25px;line-height: 32px}
#panel-pres .pres-bubble img {position: absolute;top:100%;height: 75px;left: 30%;-webkit-transform: scale(1,-1);transform: scale(1,-1);}
#panel-pres .pres-person {width:15%;float:left;margin-left:20%;margin-right:9%}
#panel-pres .pres-words {margin-top: 40px;}
#panel-pres .pres-words div {float: left;position: relative;width:50%}
#panel-pres .pres-words div div {width:100%}
#panel-pres .pres-words div div img {float: left;margin:0 15px 15px 0;box-shadow:5px 5px 0px #cdcbb8}
#panel-pres .pres-words div div img:hover {box-shadow:0 0 0 #cdcbb8;transform:translate(5px,5px);-webkit-transform:translate(5px,5px);}
#panel-pres .pres-txt3 {width:90%;margin-bottom:15px}
#panel-pres .end-text {margin-top:25%}
#panel-pres .button {margin-top: 35px;}

#panel-kodi .group {position: relative;width:100%}
#panel-kodi .door {width: 35%;margin-left: 32%;float: left;position: relative;}
#panel-kodi .group img:nth-child(1) {position: absolute;margin-top:40px;left:50%;top:60px;width:0px;-webkit-transform: rotate(-41deg);transform: rotate(-41deg);}
#panel-kodi .kodi-group {width:70%;float:left;margin-left:15%;}
#panel-kodi #middle-container,#panel-kodi #middle-container2 {position: relative;}
#panel-kodi .kodi-z {position: absolute;width: 5%;top: 336px;left: 54%;height: 100px;-webkit-transform: rotate(-25deg);transform: rotate(-25deg);}
#panel-kodi .kodi-z img {width:100%;height:auto;left:0;top:0;position: absolute}
#panel-kodi .kodi-headline {width:35%;float:left;margin-left:10%}
#panel-kodi .kodi-headline .game-headline {width:85%;margin-left:0}
#panel-kodi .kodi-headline img {width:100%}
#panel-kodi .kodi-pic {width:45%;float:left;}
#panel-kodi .kodi-pic .kodi-z {width:10%;top: 30px;left: 52%;}
#panel-kodi .kodi-game-container {width:100%;height:120px;float:left;position: relative;margin-top: 15px}
#panel-kodi .kodi-game {position: absolute;width:70%;height:100%;left:50%;margin-left:-35%;top:0;}
#panel-kodi .kodi-game .kodi-target {width:100%;position: absolute;top:0;left:0}
#panel-kodi .kodi-game .kodi-bullseye {width: 25%;position: absolute;top: 8%;left: 50%;margin-left: -12%;height: 150%;}
#panel-kodi .kodi-game .kodi-ball {width:10%;position: absolute;left:-2%;top:45%;cursor: pointer;}
#panel-kodi .end-text {margin-bottom: 25px}

#panel-donuts .donuts-intro {float:left;width:29%;margin-left:7%}
#panel-donuts #donuts-intro {float:left;width:100%;position: relative;margin-top:20px}
#panel-donuts .person1 {width:12%;margin-top:100px;}
#panel-donuts #middle-container {position: relative;width:100%;float:left;height: 500px}
#panel-donuts #middle-container div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
#panel-donuts #middle-container div:nth-child(1) img {opacity: 0;height: 50%;margin-left: -250px;position: absolute;left:60%;top: 40%;}
#panel-donuts #middle-container div:nth-child(2) img {height: 100%;left: 55%;margin-left: -250px;position: absolute;}
#panel-donuts .donuts-headline {margin-left:10%}
#panel-donuts .donuts-headline p {color:#f37a8a;padding-top:15px;text-align: left}
#panel-donuts .game-headline {float: left;width:50%;margin-left:0}
#panel-donuts .game-headline img:nth-child(1) {width:85%}
#panel-donuts .game-headline img:nth-child(2) {width:100%}
#panel-donuts .game-container {width:100%;float: left;position: relative}
#panel-donuts .donuts {width:35%;float: left;margin-left:55%;margin-top:-25%}
#panel-donuts .arm {width:100%;left:0;top: -12%;position: absolute;overflow: hidden}
#panel-donuts .arm img {width:65%;margin-left:-35%}
#panel-donuts .game-error {position: absolute;top:30%}
#panel-donuts .game-button {float:left;width:30%;cursor: pointer;box-shadow:10px 10px 0px #cdcbb8;margin-left: 20%;margin-top: -5%;}
#panel-donuts .game-button:hover {box-shadow:0 0 0 #cdcbb8;transform:translate(7px,7px);-webkit-transform:translate(7px,7px);}
#panel-donuts .button {margin-top:30px}

#end-intro {position: relative;width:100%;float:left;}
#end-intro .door {float:left;width:34%;margin-left:33%;margin-top: 30px;}
#end-intro .person1 {position: absolute;width:12%;top:27%;left:46%;opacity: 1}
#panel-end #middle-container,#panel-end #middle-container2,#panel-donation #middle-container2 {position: relative;}
#panel-end .black {width:70%;height:700px;position: absolute;left:50%;margin-left:-35%;top:-150px;background-color: black;border-radius: 50%}
#panel-end .end-group,#panel-donation .end-group {float:left;width:50%;margin-left:25%;position: relative;}
#panel-end .end-groupb {position: absolute;width:50%;top:0;left:25%;opacity: 1}
#panel-end .person2,#panel-end .person3,#panel-donation .person3 {opacity: 0;position: absolute;width:9%;top:-150px;left:25%;-webkit-transform:scale(-1,1);transform:scale(-1,1)}
#panel-end .person2 {opacity: 1}
#panel-end .person3,#panel-donation .person3 {left:34%;top:-120px;opacity: 1}
#panel-end .speech1 {position: absolute;width:16%;top:-150px;left:19%;}
#panel-end .speech2 {position: absolute;width:16%;top:-150px;left:70%;}
#panel-end .button {margin-top: 25px;}

#panel-donation #middle-container2 {margin-top:150px;position: relative;}
#panel-donation #middle-container3 {margin-top:25px;}
#panel-donation .speech3 {float:left;position:relative;width:70%;margin-left:15%;background-color:#fff;border-radius:70px;}
#panel-donation .speech3 p {font-size: 20px;padding:25px 9px 15px 9px;width: 90%;margin-left: 5%;}
#panel-donation .speech3 img {position: absolute;top:-75px;height:75px;left:72%;}
#panel-donation .speech4 {position:absolute;width:auto;right:15%;top:-110px;background-color:#fff;border-radius:50%;padding:20px 20px 20px 10px}
#panel-donation .speech4 p {font-size: 20px;padding:25px 9px 15px 9px;width: 90%;margin-left: 5%;}
#panel-donation .speech4 img {position: absolute;bottom:-54px;height: 55px;left: 38%;-webkit-transform: scale(1,-1);transform: scale(1,-1);}
#panel-donation #donate-intro {padding-top: 30px;position: relative}
#panel-donation .snowflake1 {position: absolute;width:4%;left:20%;top:-150px}
#panel-donation .snowflake2 {position: absolute;width:5%;left:14%;top:0px}
#panel-donation .snowflake3 {position: absolute;width:5%;left:37%;top:-150px}
#panel-donation .snowflake4 {position: absolute;width:5%;left:31%;top:0px}
#panel-donation .snowflake5 {position: absolute;width:5%;left:60%;top:-150px;}
#panel-donation .snowflake6 {position: absolute;width:5%;left:65%;top:0px}
#panel-donation .snowflake7 {position: absolute;width:5%;left:75%;top:-110px}
#panel-donation .snowflake8 {position: absolute;width:5%;left:78%;top:0}
#panel-donation #donate-intro img {float: left;}
#panel-donation #donate-intro img:nth-child(1) {width:25%;margin-left:21%;margin-top: 100px;}
#panel-donation #donate-intro img:nth-child(2) {width:9%;margin-left:}
#panel-donation #donate-intro img:nth-child(3) {width:25%;margin-top: 100px;}
#panel-donation .full-p {width:60%;margin-left:20%}
#panel-donation .social {float:left;width:100%;text-align: center;position: relative;}
#panel-donation .social img {width:70px;height:70px;transition: all .3s ease-in-out}
#panel-donation .social img:hover {cursor: pointer;}
#panel-donation .twitter {margin-right:10px}
#panel-donation .buttons-container {background-color: transparent;background-image:url(../img/bg.jpg); padding-bottom:210px;}

.spacer-small {height:35px;width:100%}
.spacer-large {height:170px;width:100%}
.spacer-xlarge {height:235px;width:100%}
#panel-coffee .spacer-xlarge,#panel-end .spacer-xlarge,#panel-donuts .spacer-xlarge,#panel-pres .spacer-xlarge,#panel-kodi .spacer-xlarge {height:300px;}
.mobile-spacer {display:none}



.scrollanimate { -webkit-animation: 2.5s scrollanimate infinite forwards;-webkit-animation-timing-function: ease-in-out;
  animation: 2.5s scrollanimate infinite forwards;animation-timing-function: ease-in-out;}
@-webkit-keyframes scrollanimate {
  0% {margin-top:0px}
  50% {margin-top:0px}
  70% {margin-top:6px;}
  80% {margin-top:6px;}
  100% {margin-top:0px}
}
@keyframes scrollanimate {
    0% {margin-top:0px}
    50% {margin-top:0px}
    70% {margin-top:6px;}
    80% {margin-top:6px;}
    100% {margin-top:0px}
}
.bounce {-webkit-transform:scale(0);transform:scale(0);}
.bounceanimation { -webkit-animation: 1s bounceanimate forwards;-webkit-animation-timing-function: ease-in-out;
  animation: 1s bounceanimate forwards;animation-timing-function: ease-in-out;}
@-webkit-keyframes bounceanimate {
  0% {-webkit-transform:scale(0)}
  70% {-webkit-transform:scale(1.1)}
  100% {-webkit-transform:scale(1)}
}
@keyframes bounceanimate {
	0% {transform:scale(0);}
	70% {transform:scale(1.1);}
    100% {transform:scale(1);}
}
.introbubbleanimation { -webkit-animation: .5s introbubbleanimation forwards;-webkit-animation-timing-function: ease-in-out;
  animation: .5s introbubbleanimation forwards;animation-timing-function: ease-in-out;}
@-webkit-keyframes introbubbleanimation {
  24% {width:100%}
  25% {width:95%}
  49% {width:95%}
  50% {width:85%}
  74% {width:85%}
  75% {width:74%}
  99% {width:74%}
  100% {width:0%}
}
@keyframes introbubbleanimation {
    24% {width:100%}
    25% {width:95%}
    49% {width:95%}
    50% {width:85%}
    74% {width:85%}
    75% {width:74%}
    99% {width:74%}
    100% {width:0%}
}
.donutsrotation { -webkit-animation: 1.75s donutsrotation infinite forwards;-webkit-animation-timing-function: ease-in-out;
  animation: 1.75s donutsrotation infinite forwards;animation-timing-function: ease-in-out;}
@-webkit-keyframes donutsrotation {
  25% {-webkit-transform:rotate(3deg)}
  50% {-webkit-transform:rotate(3deg)}
  75% {-webkit-transform:rotate(0deg)}
  100% {-webkit-transform:rotate(0deg)}
}
@keyframes donutsrotation {
    25% {transform:rotate(3deg)}
    50% {transform:rotate(3deg)}
    75% {transform:rotate(0deg)}
    100% {transform:rotate(0deg)}
}
.sleepz1animation { -webkit-animation: 2s sleepz1animation infinite forwards;-webkit-animation-timing-function: ease-in-out;
  animation: 2s sleepz1animation infinite forwards;animation-timing-function: ease-in-out;}
@-webkit-keyframes sleepz1animation {
  0% {opacity: 0}
  25% {opacity: 1}
  90% {opacity: 1}
  100% {opacity: 0}
}
@keyframes sleepz1animation {
	0% {opacity: 0}
    25% {opacity: 1}
    90% {opacity: 1}
	100% {opacity: 0}
}
.sleepz2animation { -webkit-animation: 2s sleepz2animation infinite forwards;-webkit-animation-timing-function: ease-in-out;
  animation: 2s sleepz2animation infinite forwards;animation-timing-function: ease-in-out;}
@-webkit-keyframes sleepz2animation {
  0% {opacity: 0}
  50% {opacity: 1}
  100% {opacity: 1}
}
@keyframes sleepz2animation {
	0% {opacity: 0}
    50% {opacity: 1}
    100% {opacity: 1}
}
.sleepz3animation { -webkit-animation: 2s sleepz3animation infinite forwards;-webkit-animation-timing-function: ease-in-out;
  animation: 2s sleepz3animation infinite forwards;animation-timing-function: ease-in-out;}
@-webkit-keyframes sleepz3animation {
  0% {opacity: 0}
  75% {opacity: 1}
  100% {opacity: 1}
}
@keyframes sleepz3animation {
	0% {opacity: 0}
    75% {opacity: 1}
    100% {opacity: 1}
}
.ballslideanimation { -webkit-animation: 11.5s ballslideanimation infinite forwards;-webkit-animation-timing-function: ease-in-out;
  animation: 11.5s ballslideanimation infinite forwards;animation-timing-function: ease-in-out;}
@-webkit-keyframes ballslideanimation {
  0% {left: -2%}
  50% {left: 93%}
  100% {left: -2%}
}
@keyframes ballslideanimation {
	0% {left: -2%}
	50% {left: 93%}
    100% {left: -2%}
}
@media screen and (max-width: 1500px) {
	#panel-donation .buttons-container {padding-bottom: 150px}
}
@media screen and (max-width: 1300px) {
	#panel-donation .buttons-container {padding-bottom: 100px}
}
@media screen and (max-width: 1100px) {
    #header img:nth-child(2) {top:15%}
    .buttons {width:420px}
    .button {height:77px;}
    .button img {box-shadow: 8px 8px 0px #cdcbb8;}
    .spacer-xlarge {height:200px;}
	#panel-donation .speech4 {top:-130px;right:13%}
	#steve-intro {height:510px}
	#panel-kodi .kodi-z {top:300px}
	#panel-intro #middle-container .intro-bubble div {height: 125px}
	#panel-pres .group img:nth-child(2) {top:80px}
	#panel-donation .buttons-container {padding-bottom: 65px}
}
@media screen and (max-width: 1000px) {
    .buttons {width:350px}
    .button {height:72px;}
    .button img {box-shadow: 6px 6px 0px #cdcbb8;}
    .spacer-xlarge {height:180px;}
	#panel-coffee .spacer-xlarge,#panel-end .spacer-xlarge,#panel-donuts .spacer-xlarge,#panel-pres .spacer-xlarge,#panel-kodi .spacer-xlarge {height:200px;}
	.headline-line-left, .headline-line-right {margin-top:35px;width:90px}
	.headline-container h1 {font-size:52px}
	p {font-size: 22px;line-height: 29px}
	#steve-intro {height:470px}
	#panel-pres .group img:nth-child(2) {top:70px}
	#panel-kodi .kodi-z {top:260px}
	#panel-kitchen #middle-container > div:nth-child(3) img:nth-child(2) {top: 65px;}
	#panel-kitchen #middle-container > div:nth-child(3) img:nth-child(3) {top: 60px;left:55px}
	#panel-kitchen #middle-container > div:nth-child(2) {width:24%}
	#panel-steve #middle-container2 .speech4 {left:120px}
	#panel-donation .speech3 {width: 80%;margin-left: 10%;}
	#panel-donation .buttons-container {padding-bottom: 50px}
}
@media screen and (max-width: 900px) {
	p {font-size: 19px;line-height: 26px;}
	.headline-line-left, .headline-line-right {margin-top:31px;width:80px}
	#panel-intro #middle-container .intro-bubble div {height: 100px}
	#panel-donation #donate-intro img:nth-child(1) {width: 33%;margin-left: 8%;}
	#panel-donation #donate-intro img:nth-child(2) {width:12%}
	#panel-donation #donate-intro img:nth-child(3) {width: 33%;}
	.spacer-large {height: 140px}
	.spacer-small {height:25px}
	.button {height: 65px;}
	#panel-donuts #middle-container {height:450px}
	#panel-donuts #middle-container div:nth-child(2) img {margin-left:-210px}
	#panel-end .black {height: 600px}
	#panel-kitchen #middle-container > div:nth-child(3) {top:200px}
	#panel-kodi .kodi-z {top: 230px}
	#panel-kodi .kodi-pic .kodi-z {top:55px}
	#panel-kodi .kodi-game {width:90%;margin-left:-45%;top:25px}
	#panel-kodi .kodi-pic img:nth-child(2) {width: 120%;}
	#panel-pres .desk {margin-top: 25px;}
	#panel-pres .group img:nth-child(2) {top:90px}
	#panel-pres #middle-container div img:nth-of-type(1) {top:-70px;width:23%}
	#panel-pres #middle-container div img:nth-of-type(2) {left:10%;width:23%}
	#panel-pres .pres-words div div img {height: 35px}
	#panel-pres .pres-bubble p span {font-size:20px}
	#steve-intro {height: 440px}
	#panel-steve #middle-container .txt1 {width:41%}
	#panel-steve #middle-container .txt2 {width:41%;top:450%}
	#panel-donation .speech4 {right: 11%;top: -130px;}
}
@media screen and (max-width: 800px) {
    #header img:nth-child(2) {top:14%}
    p {font-size:18px;line-height: 22px}
    .spacer-large {height: 80px}
	.mobile-spacer {width:100%;height:50px;background-color: #eae6d0;display: block}
    .buttons {margin-top:-45px;}
	.buttons-bg {top:49px}
    .button {height:65px}
	#panel-intro .scroll p {font-size: 24px;}
	#panel-intro .scroll img {width:70px;margin-left: -35px;}
	.intro-person {width: 12%;margin-left: 44%;}
	.headline-container {margin-bottom: 0}
    .headline-container h1 {font-size:36px}
	.headline-line-left, .headline-line-right {margin-top:22px;width:70px}
    #middle-container .intro-bubble div {height:130px}
	#panel-intro #middle-container > div:nth-child(2) {width:12%}
	#panel-kitchen #middle-container > div:nth-child(3) img:nth-child(2) {top: 50px;}
	#panel-kitchen #middle-container > div:nth-child(3) img:nth-child(3) {top: 40px;left: 45px;}
	#panel-desk #middle-container, #panel-desk #middle-container2 {margin-top:20px}
	#panel-desk #middle-container div {top:-90px}
	#panel-donuts #middle-container {height: 400px}
	#panel-donuts #middle-container div:nth-child(1) img, #panel-donuts #middle-container div:nth-child(2) img {margin-left:-200px}
	#steve-intro {height:400px}
	#panel-kodi .kodi-z {top:210px}
	#panel-kodi .kodi-pic img:nth-child(2) {width:100%}
	#panel-kodi .kodi-pic .kodi-z {top:35px}
	#panel-kodi .kodi-game .kodi-ball {top:43%}
	#panel-kodi .kodi-headline {width:39%}
	#panel-kodi .kodi-headline .text {width:115%}
	#panel-pres .group img:nth-child(2) {top:80px}
	#panel-pres #middle-container {margin-top:30px}
	#panel-pres #middle-container div img:nth-of-type(1) {width:26%}
	#panel-pres #middle-container div img:nth-of-type(2) {width:26%;top:75%}
	#panel-pres .pres-txt3 {width:100%}
	#panel-pres .pres-bubble p,#panel-pres .pres-bubble p span {font-size:22px}
	#panel-steve #middle-container .txt1 {width:44%}
	#panel-steve #middle-container .txt2 {width:44%;top:470%}
	#panel-steve #middle-container .speech1, #panel-steve #middle-container .speech2, #panel-steve #middle-container .speech3 {width:22%}
	#panel-steve #middle-container2 .steve-person4 {width:18%;margin-left:27%}
	#panel-steve #middle-container2 .person-walking {width:24%}
	#panel-steve #middle-container2 .speech4 {width:34%;left:80px}
	#panel-end #middle-container,#panel-end #middle-container2 {margin-top:40px}
	#panel-end .person2 {top:-120px}
	#panel-end .person3, #panel-donation .person3 {top:-90px;left:36%}
	#panel-end .black {height:450px;top:-110px}
	#panel-end .speech1,#panel-end .speech2 {top:-100px}
}
@media screen and (max-width: 650px) {
    #header img:nth-child(2) {top:9%}
	#panel-intro #middle-container > div:nth-child(1) img {width:59%}
	#panel-intro #middle-container .intro-bubble img {width:78%}
    .buttons {margin-top:-75px;}
	.buttons-bg {top:89px}
	.mobile-spacer {height: 90px}
	.spacer-large {height: 50px}
    .spacer-small {height: 10px}
    .headline-container h1 {font-size:30px}
	.headline-line-left, .headline-line-right {height:2px}
    .full-p {width:70%;margin-left: 15%;}
	#panel-intro #middle-container .intro-bubbles {top:-60px}
    #middle-container .intro-bubble div {height:100px}
    #middle-container > div:nth-child(1) img {width:60%}
    #panel-intro #middle-container .intro-bubble div {width: 70%}
	#panel-intro #middle-container .intro-bubble div div {width:100%;right:0%}
	#steve-intro {height:300px}
	#panel-kitchen #middle-container > div:nth-child(2) {left:18%}
	#panel-kitchen #middle-container > div:nth-child(3) {top:150px}
	#panel-kitchen #middle-container > div:nth-child(3) img:nth-child(3) {left:35px}
	.game-error {width:300px;margin-left:-150px}
	#panel-desk #middle-container {margin-top:50px}
	#panel-desk #middle-container div {width: 74%;left: 13%;}
	#panel-desk #middle-container .desk {width: 64%;margin-left: 18%;}
	#panel-desk #middle-container2 .desk {width: 64%;margin-left: 29%;}
	#panel-desk #middle-container2 div img {width: 52%}
	#panel-donation .speech3 {width:90%;margin-left: 5%}
	#panel-donation .speech3 p,#panel-donation .speech4 p {font-size:17px;width:88%}
	#panel-end .black {height: 400px;top: -90px;}
	#panel-end .person2 {top:-100px}
	#panel-end .person3, #panel-donation .person3 {top:-70px}
	#panel-end .speech1 {width:21%;left:15%}
	#panel-end .speech2 {width:21%;left:74%}
	#panel-donuts #middle-container {height:300px}
	#panel-donuts #middle-container div:nth-child(1) img, #panel-donuts #middle-container div:nth-child(2) img {margin-left:-120px;width:auto}
	#panel-donuts .donuts-headline p {width:50%}
	#panel-donuts .game-button {box-shadow:6px 6px 0px #cdcbb8}
	#panel-kitchen #middle-container > div:nth-child(2) {width:30%}
	#panel-kodi .group img:nth-child(1) {top:30px}
	#panel-kodi .kodi-z {top:160px}
	#panel-kodi .kodi-headline .text {width:125%}
	#panel-kodi .kodi-game .kodi-ball {top:35%}
	#panel-pres .group img:nth-child(2) {top:70px}
	#panel-pres #middle-container div img:nth-of-type(1) {width:31%}
	#panel-pres #middle-container div img:nth-of-type(2) {width:31%;top:80%}
	#panel-steve #middle-container .txt1 {width:53%}
	#panel-steve #middle-container .txt2 {width:53%;top:420%}
	#panel-steve #middle-container .speech3 {top:300%}
	#panel-steve #middle-container2 .speech4 {left:60px}
	#panel-steve #middle-container2 {margin-top:25px}
	#panel-donation .speech4 {right: 9%;top: -150px;}
	#panel-donation .speech4 img {bottom: -41px;height: 42px;}
}
@media screen and (max-width: 525px) {
    .mobile-spacer {height:130px}
    .spacer-large {height: 40px}
    .spacer-small {height: 0px}
    .buttons {margin-top:-90px;width:280px}
    .button {height:55px}
	.headline-container {height:48px}
    .headline-line-left,.headline-line-right {display: none}
    #middle-container > div:nth-child(1) img {width:80%}
    #panel-intro #middle-container .intro-bubble div {width: 90%;}
    #middle-container .intro-bubble img {margin-left:5%}
	#panel-intro #middle-container {margin-top:25px}
	#panel-intro #middle-container > div:nth-child(1) {width:42%}
	#panel-intro #middle-container > div:nth-child(1) img {width:80%}
	#panel-intro #middle-container .intro-bubble img {width:75%}
	#panel-intro #middle-container .intro-bubble {width:40%}
	#steve-intro {height:250px}
	#panel-kitchen #middle-container > div:nth-child(2) {left:15%}
	#panel-kitchen #middle-container > div:nth-child(3) {width:14%;top:110px}
	#panel-steve #middle-container .txt1 {width:66%}
	#panel-steve #middle-container .txt2 {width: 66%;top: 360%;}
	#panel-steve #middle-container2 .speech4 {width: 45%;}
	#panel-steve #middle-container .speech3 {left:-5%;top:250%}
	#panel-steve #middle-container .speech1, #panel-steve #middle-container .speech2, #panel-steve #middle-container .speech3 {width:30%}
	#panel-steve #middle-container .speech1 {top: -45%;left: 70%}
	#panel-steve #middle-container2 {margin-top:75px}
	.game-error img {width:40%}
	#panel-coffee .spacer-xlarge, #panel-end .spacer-xlarge, #panel-donuts .spacer-xlarge, #panel-pres .spacer-xlarge, #panel-kodi .spacer-xlarge {height: 150px}
	#panel-desk #middle-container2 div img {width:60%}
	#panel-desk #middle-container2 .desk {width: 64%;margin-left: 34%;}
	#panel-donuts #middle-container {height: 270px}
	#panel-donuts .person1 {margin-top:50px;}
	#panel-end .black {height: 350px;top: -70px;}
	#panel-kitchen #middle-container > div:nth-child(2) {width:37%}
	#panel-kodi .kodi-z {top:140px}
	#panel-kodi .kodi-game .kodi-ball {top:25%}
	#panel-kodi .kodi-game .kodi-bullseye {height:100%;top: -5%;}
	#panel-pres #middle-container div img:nth-of-type(1) {width:38%;left:55%}
	#panel-pres #middle-container div img:nth-of-type(2) {width:38%}
	#panel-pres .pres-person {width: 15%;float: left;margin-left: 17%;margin-right: 5%;}
	#panel-pres .pres-words div {width:60%}
	#panel-pres .group img:nth-child(2) {top:60px}
	#panel-pres #middle-container div img:nth-of-type(1) {width: 41%;left: 45%;}
	#panel-pres #middle-container div img:nth-of-type(2) {top:85%;width: 41%;}
	#panel-pres .game-headline {margin-top:25px}
	#panel-pres .pres-person {margin-left:8%}
	#panel-pres .pres-bubble img {height: 45px}
	#panel-pres .pres-txt3 {width: 115%;}
	#panel-pres .pres-words div div img {height: 26px;}
}
@media screen and (max-width: 450px) {
	#mobile-overlay {display: block;}

	#header img:nth-child(2) {top:8%;}
	#steve-intro {height:185px}
	.buttons {width: 320px; margin-top: -95px;}
	.buttons-bg {top:129px}
	#panel-intro #middle-container {margin-top:0}
	#panel-intro #middle-container .intro-bubble div div {right:-15%;margin-top: 0}
	#panel-intro #middle-container .intro-bubble img {margin-left:0}
	#panel-intro #middle-container > div:nth-child(1) img {width:65%;margin-right: 15%;}
	#panel-intro #middle-container > div:nth-child(1) {width:65%}
	#panel-intro #middle-container > div:nth-child(2) {margin-left:30%;margin-top:40px}
	#panel-intro #middle-container > div:nth-child(2) img {margin-top:30px}
	#panel-intro #middle-container .intro-bubble img {margin-left:17%;width:90%}
	#panel-intro #middle-container .intro-bubble div {height: 100px;margin-top:65px}
	#panel-intro #middle-container .intro-bubbles {top: 100px;width: 6%;left: 33%;}
	.game-error img {width:30%}
	.game-error {width: 250px;margin-left: -125px;}
	#panel-end .black {height: 300px}
	#panel-end .person3, #panel-donation .person3 {top: -50px;left: 37%;}
	#panel-end .speech1 {width: 28%;left: 10%;}
	#panel-end .speech2 {width: 28%;left: 68%;}
	#panel-desk #middle-container div {width: 90%;left: 5%;}
	#panel-desk #middle-container2 div img {width: 68%;}
	#panel-donation .speech3 img {top: -54px;height: 55px;}
	#panel-donation .full-p {width: 90%;margin-left: 5%;}
	#panel-donation .social img {width: 57px;height: 57px;margin-top: 5px;}
	#panel-donuts #middle-container {height: 230px;}
	#panel-donuts #middle-container div:nth-child(2) img {margin-left:-100px}
	#panel-donuts .game-button {width:40%;margin-left:10%}
	#panel-kitchen #middle-container > div:nth-child(1) {width:55%}
	#panel-kitchen #middle-container > div:nth-child(1) img {width:89%}
	#panel-kitchen #middle-container > div:nth-child(2) {width:42%}
	.kitchen-person {width: 22%;margin-left: 40%;}
	#panel-kitchen #middle-container > div:nth-child(2) img {margin-top:-30px}
	#panel-kitchen #middle-container > div:nth-child(3) {width: 18%;left: 58%;top: 52%;height: 100px;}
	#panel-kodi .kodi-group {width: 90%;margin-left: 5%;}
	#panel-kodi .kodi-z {width:8%}
	#panel-kodi .kodi-headline .text {width: 210%;}
	#panel-kodi .kodi-game .kodi-ball {top: 20%;}
	#panel-steve #middle-container .speech1, #panel-steve #middle-container .speech2, #panel-steve #middle-container .speech3 {width:37%}
	#panel-steve #middle-container .txt1 {width: 86%;}
	#panel-steve #middle-container .speech1 {top: 50px;}
	#panel-steve #middle-container .speech2 {top: 180px;}
	#panel-steve #middle-container .speech3 {left:-10%}
	#panel-steve #middle-container .person2 {margin-top:40px}
	#panel-steve #middle-container .txt2 {width: 86%;top: 430%;}
	#panel-steve #middle-container2 {margin-top: 135px;}
	#panel-steve #middle-container2 .steve-person4 {margin-left:20%}
	#panel-steve #middle-container2 .speech4 {width:58%}
	#panel-pres #middle-container div img:nth-of-type(1),#panel-pres #middle-container div img:nth-of-type(2) {width: 48%;}
	#panel-donation .speech3 {border-radius:30px}
}
@media screen and (max-width: 340px) {
	#steve-intro {height:160px}
	.buttons {width: 270px;}
	.headline-container h1 {font-size:24px}
	#panel-intro #middle-container > div:nth-child(1) img {width:80%}
	#panel-intro #middle-container .intro-bubble img {margin-left: 0;width: 120%;}
	#panel-intro #middle-container .intro-bubble div div {width: 120%;right: -20%;}
	#panel-donation .speech3 img {top: -39px;height: 40px;}
	#panel-donuts .game-headline {width:95%}
	#panel-end .speech2 {left:64%}
	#panel-kodi .kodi-z {top:120px}
	#panel-kodi .kodi-game-container {height: 100px}
	#panel-steve #middle-container .speech2 {top:155px}
}
@media screen and (max-height: 500px) {
	#header img:nth-child(2) {top: 30%;}
}